<template>
  <div>
    <el-dialog class="dia-style" :title="title" :visible.sync="isOpen" width="60%" append-to-body>
      <el-form v-show="!isShowSubmodel" ref="form" :model="formData" :rules="rules" label-width="100px">
        <el-form-item label="产品名称" prop="name">
          <el-input v-model="formData.name" placeholder="请输入名称"/>
        </el-form-item>
        <el-form-item label="产品类型" prop="roleKey">
          <div class="form-item-wk">
            <div :class="['form-item',currentIndex==i?'active':'']" v-for="(item,i) in options" :key="i" @click="handleClick(i)">
              <img :src="require('@/assets/images/import/'+item.img+'.png')" alt="">
              <p>{{ item.name }}</p>
            </div>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
          </div>
        </el-form-item>
      </el-form>
      <el-form v-show="isShowSubmodel" ref="form" :model="subFormData" :rules="rules" label-width="100px">
        <el-form-item label="数据源名称" prop="name">
          <el-input v-model="formData.name" placeholder="请输入数据源名称"/>
        </el-form-item>
        <el-form-item label="解码方式">
          <el-radio-group v-model="formData.decoding">
            <el-radio-button label="UTF-8"></el-radio-button>
            <el-radio-button label="GBK"></el-radio-button>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="接入产品" prop="product">
          <div class="mb20">
            <el-button icon="el-icon-thumb" style="margin-right:20px;" @click="handleSelectData">请选择</el-button>
            <span>没找到？点击此处可<el-button type="text" @click="handleAddProduct">新增接入产品</el-button></span>

          </div>
          <el-table :data="importProduct" :header-cell-style="{ background: '#F3F5FC' }">
            <el-table-column label="序号" align="center" width="120">
              <template slot-scope="scop">
                {{ scop.$index + 1 }}
              </template>
            </el-table-column>
            <el-table-column label="名称" prop="name" :show-overflow-tooltip="true"/>
            <el-table-column label="产品类型" prop="productName" :show-overflow-tooltip="true"/>
            <el-table-column label="接入厂商" prop="companyName" width="140"/>
            <el-table-column label="版本" align="center" prop="versionName" width="180">
            </el-table-column>
            <el-table-column label="操作" align="center" width="200" class-name="small-padding fixed-width">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  type="text"
                  @click="handleDelete(scope.row)"
                >删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-form-item>
        <el-row>
          <el-col :span="24">
            <div class="tips">其他信息</div>
          </el-col>
          <el-col :span="12">
            <el-form-item label="发送端IP" prop="sendIP">
              <el-input v-model="formData.sendIP" placeholder="请输入发送端IP"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="服务端IP" prop="serveIP">
              <el-input v-model="formData.serveIP" placeholder="请输入服务端IP"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="监听端口" prop="port">
              <el-input v-model="formData.port" placeholder="请输入监听端口"/>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">{{isShowSubmodel?'保存':'下一步'}}</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
    <EditDialog ref="addRef" title="新增"></EditDialog>
    <SelectDialog ref="selectRef" title="选择接入数据"></SelectDialog>
  </div>

</template>

<script>
//  模拟数据
import importData from '../../views/accessProduct/mockData/importData.json'
import EditDialog from '@/components/accessProduct/emitDIalog'
import SelectDialog from '@/components/accessProduct/gatherData/SelectDialog'

export default {
  name: 'editProduct',
  components:{EditDialog,SelectDialog},
  props: {
    title: {
      type: String,
      default() {
        return '编辑'
      }
    },
    formData: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  data() {
    return {
      isShowSubmodel:false,
      currentIndex:null,
      isOpen: false,
      options: importData,
      subFormData:{},
      importProduct: [],
      // 表单参数
      rules: {
        roleName: [
          { required: true, message: '名称不能为空', trigger: 'blur' }
        ],
        roleKey: [
          { required: true, message: '产品类型不能为空', trigger: 'blur' }
        ]
      }
    }
  },
  watch: {},
  methods: {
    handleClick(i){
      this.currentIndex=i
    },
    /** 提交按钮 */
    submitForm: function() {
      if( !this.isShowSubmodel){
        this.isShowSubmodel=!this.isShowSubmodel;
      }else{
        let _self=this
        setTimeout(function(){
          _self.isShowSubmodel=!_self.isShowSubmodel;
        },300)
        this.isOpen=false;
      }
    },
    // 取消按钮
    cancel() {
      this.isOpen = false
      this.formData={}
      this.$emit('changeOpen', false)
    },
    /**  点击 ‘请选择’ **/
    handleSelectData(){
      this.$refs.selectRef.isOpen=true
    },
    // 打开弹窗
    handleAddProduct(){
      this.$refs.addRef.isOpen=true
    },
    //
  }
}
</script>

<style lang="scss" scoped>
.el-cascader {
  width: 100%;
}

.form-item-wk {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  align-items: stretch;
  text-align: center;

  span {
    width: 15%;
  }

  .form-item {
    margin-bottom: 20px;
    cursor: pointer;
    width: 15%;
    border: 1px solid rgba(0, 0, 0, .15);
    border-radius: 4px;
  &.active{
    border:1px solid #4B6EEF;
  }
    &:hover{
      border:1px solid #4B6EEF;
    }
    img {
      display: block;
      margin: 20px auto;
    }

    p {
      height:50px;
      display:flex;
      justify-content: center;
      align-items: center;
      padding:0px 10px;
      line-height: 20px;
      vertical-align: center;
      margin: 0;
      border-top: 1px solid rgba(0, 0, 0, .15);
    }
  }
}
::v-deep .el-dialog__body{
  height:70vh;
  overflow: auto;
}
</style>
